<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const pageSize = ref(10);
const pageNo = ref(1)
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '巡检地点名称', key: 'placeName', sortable: false},
    {title: '特殊科室', key: 'specialOffice', sortable: false},
    // {title: '是否推送消息', key: 'noPush', sortable: false},
    {title: '休息类型', key: 'restType', sortable: false},
    // {title: '每周巡检次数', key: 'weekNum', sortable: false},
    {title: '巡检次数', key: 'checkNum', sortable: false},
    {title: '二维码', key: 'placeImg', sortable: false},
    {title: '操作', key: 'actions', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const imgBaseUrl = ref("http://172.168.180.4:900/")

const search = ref('');
const name = ref(null);
watch(name, () => {
    search.value = name.value
})

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    pageNo.value = page
    pageSize.value = itemsPerPage
    axios.post('/checkPlace/select', {
        pageNo: page,
        pageSize: itemsPerPage,
        placeName: name.value
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

onMounted(() => {
    loadItems({page: 1, itemsPerPage: pageSize.value});
});

const isShowGrid = ref(false);
const gridName = ref("");
const gridPlaceId = ref("");
const gridList = ref([]);

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑',
    create: '新增'
}
const dialogType = ref(null)
const isShowDeleteDialog = ref(false)
const isShowDeleteGrid = ref(false)
const isShowUpdatedGrid = ref(false)
const editedItem = ref({
    placeName: "",
    longitude: "",
    latitude: "",
    specialOffice: "",
    noPush: "",
    restType: "",
    weekNum: "",
    orderNum: ""
});

function resetEditedItem() {
    editedItem.value = {
        placeName: "",
        longitude: "",
        latitude: "",
        specialOffice: "",
        noPush: "",
        restType: "",
        weekNum: "",
        orderNum: ""
    }
}

function clickNew() {
    dialogType.value = dialogEnum.create
    isShowDialog.value = true
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    editedItem.value.specialOffice += ''
    editedItem.value.restType += ''
    editedItem.value.checkNum += ''
    editedItem.value.noPush += ''
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function clickGrid(item) {
    beSelectItem.value = item
    let obj = {
        placeId: item.placeId
    }
    axios.post("/checkPlace/getSmallPlace", obj).then(res => {}, err => {
        gridList.value = err.data
    })
    gridName.value = ""
    gridPlaceId.value = item.placeId
    isShowGrid.value = true
}

function addGrid() {
    let obj = {
        placeName: gridName.value,
        placeId: gridPlaceId.value
    }
    axios.post("/checkPlace/addSmallPlace", obj).then(res => {
        if(res.data.code == 200) {
            snackbar.info(res.data.data)
            axios.post("/checkPlace/getSmallPlace", obj).then(res => {}, err => {
                gridList.value = err.data
            })
        } else {
            snackbar.info(res.data.data)
        }
    }, err => {
        console.log(err)
    })
}

function deleteGrid (item) {
    isShowDeleteGrid.value = true
    beDeleteItem.value = item
}

function updateGrid(item) {
    isShowUpdatedGrid.value = true
    beUpdatedItem.value = item
    beUpdatedItem.value.updateName = beUpdatedItem.value.placeName
}

function save() {
    if (dialogType.value === dialogEnum.update) {
        editedItem.value.checkNumJson = JSON.stringify(editedItem.value.checkNumJson)
        axios({
            method: 'POST',
            url: '/checkPlace/update',
            data: editedItem.value
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: pageSize.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        axios({
            method: 'POST',
            url: '/checkPlace/save',
            data: editedItem.value
        }).then((res) => {
            console.log(res.data)
            snackbar.info('创建成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: pageSize.value})
        })
    }
}

// 删
const beDeleteItem = ref({})
const beSelectItem = ref({})
const beUpdatedItem = ref({})

function clickDelete(item) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
}

function clickDeleteConfirm() {
    axios.get('/sys_role/role/delRole/?roleId=' + beDeleteItem.value.id).then(() => {
        snackbar.info("删除成功")
        loadItems({page: 1, itemsPerPage: pageSize.value})
        clickCloseDelete()
    })
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    beDeleteItem.value = null
}

function clickCloseUpdated() {
    isShowUpdatedGrid.value = false
    beUpdatedItem.value = {}
}

function clickDeleteUpdated() {
    let obj = {
        placeId: beUpdatedItem.value.placeId,
        placeName: beUpdatedItem.value.updateName
    }
    axios.post('/checkPlace/updateSmallPlace', obj).then((res) => {
        if(res.data.code == 200) {
            snackbar.info("更新成功")
            axios.post("/checkPlace/getSmallPlace", { placeId: beSelectItem.value.placeId }).then(res => {}, err => {
                gridList.value = err.data
            })
            clickCloseUpdated()            
        } else {
            snackbar.info(res.data.data)
        }
    })
}

function clickDeleteGrid() {
    axios.post('/checkPlace/deleteSmallPlace', {id: beDeleteItem.value.id}).then((res) => {
        if(res.data.code == 200) {
            snackbar.info("删除成功")
            axios.post("/checkPlace/getSmallPlace", { placeId: beSelectItem.value.placeId }).then(res => {}, err => {
                gridList.value = err.data
            })
            clickCloseGrid()            
        } else {
            snackbar.info(res.data.data)
        }
    })
}

function clickCloseGrid() {
    isShowDeleteGrid.value = false
    beDeleteItem.value = null
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>巡检地点管理</v-toolbar-title>
        <v-text-field v-model="name" :clearable="true" hide-details placeholder="查询名称"></v-text-field>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-plus" v-on:click="clickNew" v-bind="props"></v-btn>
            </template>
            <v-card>
                <v-card-title>{{ dialogType }}</v-card-title>
                <v-card-text>
                    <v-text-field v-model="editedItem.placeName" label="巡检地点名称" required></v-text-field>
                    <v-text-field v-model="editedItem.longitude" label="经度"></v-text-field>
                    <v-text-field v-model="editedItem.latitude" label="纬度"></v-text-field>
                    <v-select v-model="editedItem.specialOffice" label="科室类型" required :items="[{value:'0',title:'普通科室'},{value:'1',title:'重点科室'},{value:'2',title:'病区'},{value:'3',title:'行政后勤'},{value:'4',title:'其他'},{value:'5',title:'锅炉房'}]"></v-select>
                    <v-select v-model="editedItem.checkNum" label="巡检次数" required :items="[{value:'1',title:'全天一次'},{value:'2',title:'上午、下午'},{value:'4',title:'上午、下午、前夜、后夜'}]"></v-select>
                    <v-select v-model="editedItem.restType" label="休息类型" required :items="[{value:'0',title:'周六休息'},{value:'1',title:'周日休息'},{value:'2',title:'周末双休'}]"></v-select>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="save">确定</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定删除?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowGrid" max-width="500px">
            <v-card density="compact">
                <v-card-title>微网格</v-card-title>
                <v-toolbar>
                    <v-text-field v-model="gridName" :clearable="true" hide-details placeholder="新增微网格"></v-text-field>
                    <v-btn icon="mdi-plus" @click="addGrid"></v-btn>
                </v-toolbar>
                <div v-for="(item, index) in gridList">
                    <h1>{{ index + 1 }}.{{ item.placeName }}</h1>
                    <el-image :src="imgBaseUrl + item.placeImg" :preview-src-list="[imgBaseUrl + item.placeImg]" style="height: 200px;" alt=""></el-image>
                    <br>
                    <v-btn icon="mdi-file-edit" @click="updateGrid(item)"></v-btn>
                    <v-btn icon="mdi-delete-circle" @click="deleteGrid(item)"></v-btn>
                </div>
            </v-card>
        </v-dialog>

        <v-dialog v-model="isShowDeleteGrid" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定删除?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseGrid">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteGrid">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <v-dialog v-model="isShowUpdatedGrid" max-width="500px">
            <v-card>
                <v-card-text>
                    <v-text-field v-model="beUpdatedItem.updateName" label="微网格名称"></v-text-field>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseUpdated">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteUpdated">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>

    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="pageSize" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.noPush="{ item }">
            <span v-if="item.raw.noPush == 0">是</span>
            <span v-if="item.raw.noPush == 1">否</span>
        </template>
        <template v-slot:item.checkNum="{ item }">
            <span v-show="item.raw.checkNum == 1">全天一次&nbsp;</span>
            <span v-show="item.raw.checkNum == 2">上午、下午&nbsp;</span>
            <span v-show="item.raw.checkNum == 4">上午、下午、前夜、后夜&nbsp;</span>
        </template>
        <template v-slot:item.restType="{ item }">
            <span v-if="item.raw.restType == 0">周六休息</span>
            <span v-if="item.raw.restType == 1">周日休息</span>
            <span v-if="item.raw.restType == 2">周末双休</span>
        </template>
        <template v-slot:item.specialOffice="{ item }">
            <span v-if="item.raw.specialOffice == 0">普通科室</span>
            <span v-if="item.raw.specialOffice == 1">重点科室</span>
            <span v-if="item.raw.specialOffice == 2">病区</span>
            <span v-if="item.raw.specialOffice == 3">行政后勤</span>
            <span v-if="item.raw.specialOffice == 4">其他</span>
            <span v-if="item.raw.specialOffice == 5">锅炉房</span>
        </template>
        <template v-slot:item.placeImg="{ item }">
            <el-image :src="imgBaseUrl + item.raw.placeImg" :preview-src-list="[imgBaseUrl + item.raw.placeImg]" style="height: 50px;" alt=""></el-image>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-pencil" variant="text" @click="clickEdit(item.raw)"></v-btn>
            <span @click="clickGrid(item.raw)" class="grid">微网格查看</span>
            <!-- <v-btn icon="mdi-delete" variant="text" @click="clickDelete(item.raw)"></v-btn> -->
        </template>
    </v-data-table-server>
</template>

<style scoped>
.grid {
    cursor: pointer;
    border: 2px solid #aaa;
    border-radius: 4px;
    padding: 3px;
    display: inline-block;
}
</style>
